<template>
	<page-meta>
		<navigation-bar title="乐居" background-color="#354e44" />
	</page-meta>
	<view class="modify">
		<view class="modify-item">
			<view class="modify-item-label">收件人</view>
			<input class="modify-item-input" type="text" v-model="address.name" placeholder="请输入收件人姓名" />
		</view>
		<view class="modify-item">
			<view class="modify-item-label">电话号码</view>
			<input class="modify-item-input" type="text" v-model="address.phoneNumber" placeholder="请输入收件人电话号码" />
		</view>
		<view class="modify-item">
			<view class="modify-item-label ">所在地区</view>
			<input @tap="openAddress" disabled class="modify-item-input black" type="text" v-model="place"
				placeholder="请点击选择地址" />
		</view>
		<view class="modify-item">
			<view class="modify-item-label ">详细地址</view>
			<input class="modify-item-input" type="text" v-model="address.detailAddress" placeholder="输入详细地址" />
		</view>
		<view class="modify-item modify-switch">
			<view class="modify-item-label">设置默认地址</view>
			<switch class="modify-item-input" :checked="isDefalut" @change="changeDefault" />
		</view>
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"
			themeColor="#007AFF"></simple-address>
		<view @tap="deleteAddress" v-if="flag" class="modify-delete">删除收货地址</view>
		<view @tap="save" class="modify-save">保存</view>
	</view>

	</view>
</template>

<script>
	import {
		showTip
	} from '../../../utils/index.js'
	import WxValidate from '../../../utils/WxValidate.js'
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	import {
		updateAddressInfo as updateAddressInfoApi,
		addAddressInfo as addAddressInfoApi,
		delAddressInfo as delAddressInfoApi,
		switchDefault as switchDefaultApi
	} from '../../../api/common/index.js'
	export default {
		data() {
			return {
				address: {},
				flag: true, //true为修改,false为新增
				place: '', //拼接之后的地址
				isDefalut: false, //是否默认
				cityPickerValueDefault: [0, 0, 1],
				pickerText: {},
				id: ''
			}
		},
		components: {
			simpleAddress
		},
		onLoad(config) {
			this.address = JSON.parse(config.address);
			this.initValidate();
			if (this.address.id) {
				this.flag = true;
				this.id = this.address.id;
				var value = [];
				this.isDefalut=this.address.defaultStatus?true:false
				value.push(this.address.province);
				value.push(this.address.city);
				value.push(this.address.region);
				this.pickerText.labelArr = value;
				this.isDefalut = this.address.defaultStatus ? true : false;
				this.place = this.joinwith(this.address.province, this.address.city, this.address.region)
			} else {
				this.flag = false;
			}

		},
		methods: {
			//改变默认事件
			changeDefault(){
				this.isDefalut=!this.isDefalut;
			},
			//删除地址
			deleteAddress(){
				delAddressInfoApi(this.id)
				.then(res=>{
					// uni.navigateTo({
					// 	url: '../address/address'
					// })
					
					uni.redirectTo({
						url: '../address/address'
					})
				})
			},
			//保存
			save() {
				console.log('默认',this.isDefalut);
				let params = {
					phoneNumber: this.address.phoneNumber,
					name: this.address.name,
					detailAddress: this.address.detailAddress
				};
				if (!this.WxValidate.checkForm(params)) { //验证失败
					let error = this.WxValidate.errorList[0];
					showTip(error.msg, 'error');
				} else { //验证通过
					if(!this.place.length){
						showTip('必须选择地址','error');
						return ;
					}
					var check=this.isDefalut?1:0;
					
					if (this.flag) {
						
						updateAddressInfoApi({
								"city": this.pickerText.labelArr[1],
								"cityCode": this.pickerText.cityCode,
								"defaultStatus": check,
								"detailAddress": this.address.detailAddress,
								"id": this.id,
								"name": this.address.name,
								"phoneNumber": this.address.phoneNumber,
								// "postCode": "string",
								"province": this.pickerText.labelArr[0],
								"region": this.pickerText.labelArr[2],
								tag: '公司',
								postCode: this.pickerText.areaCode
							})
							.then(res => {
								switchDefaultApi(this.id,check)
								.then(res=>{
									uni.redirectTo({
										url: '../address/address'
									})
								})
								
							})
							
							
					}else {
					addAddressInfoApi({
						"city": this.pickerText.labelArr[1],
						"cityCode": this.pickerText.cityCode,
						"defaultStatus": check,
						"detailAddress":  this.address.detailAddress,
						"id":this.id,
						"name": this.address.name,
						"phoneNumber": this.address.phoneNumber,
						"postCode": this.pickerText.areaCode,
						"province":this.pickerText.labelArr[0],
						"region":  this.pickerText.labelArr[2],
						"tag": "公司"
					})
					.then(res=>{
						if(!res.success){
							showTip(res.message+'请先删除一些地址','error');
							setTimeout(()=>{
								uni.redirectTo({
									url: '../address/address'
								})
							},1000)
						}else{
							console.log('this.id=>>>',this.id);
							uni.redirectTo({
								url: '../address/address'
							})
							
							
						}
						
						
						
					})
				}

				} 

			},
			openAddress() {
				this.$refs.simpleAddress.open();
			},
			//地址确认
			onConfirm(e) {
				this.pickerText = e;
				this.place = this.pickerText.label
			},
			//拼接地址
			joinwith(province, city, region) {
				return province + '-' + city + '-' + region;
			},
			initValidate() {
				let rules = {
					phoneNumber: {
						required: true,
						tel: true
					},
					name: {
						required: true,
						maxlength: 10
					},
					detailAddress: {
						required: true,
					}
				}

				let message = {
					phoneNumber: {
						required: '请输入电话号码',
						tel: '请输入有效的电话号码'
					},
					name: {
						required: '请输入姓名',
						maxlength: '名字不能超过10个字'
					},

					detailAddress: {
						required: '请输入详细地址',
					}
				}
				//实例化当前的验证规则和提示消息
				this.WxValidate = new WxValidate(rules, message);
			},

		}
	}
</script>

<style lang="scss" scoped>
	.modify {
		width: 100%;
		height: calc(100vh - 90rpx);
		background-color: #f1ece7;
		box-sizing: border-box;
		padding: 0 30rpx;

		&-delete {
			margin-top: 60rpx;
			height: 100rpx;
			background-color: #e64340;
			text-align: center;
			line-height: 100rpx;
			color: #FFFFFF;
		}

		&-item {
			display: flex;
			height: 120rpx;
			line-height: 120rpx;
			border-bottom: 1rpx solid gray;
			align-items: center;

			&-label {
				width: 210rpx;
				color: gray;
			}

			&-input::placeholder {
				color: gray;
			}


			.black::placeholder {
				color: #333 !important;
			}
		}

		&-switch {
			justify-content: space-between;
		}

		&-save {
			position: fixed;
			bottom: 30rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 524rpx;
			height: 80rpx;
			background-color: #354e44;
			border-radius: 40rpx;
			text-align: center;
			color: #FFFFFF;
			line-height: 80rpx;
		}
	}
</style>
